<template>
  <div class="form-config-container">
    <ElForm label-position="top" v-if="data" :key="data.id">
      <ElFormItem
        label="控件属性"
        v-if="
          hasKey('element_permissions') ||
          hasKey('element_Propermissions') ||
          hasKey('disabled') ||
          hasKey('readonly') ||
          hasKey('clearable') ||
          hasKey('multiple') ||
          hasKey('element_previewImages') ||
          hasKeyFrom('listselection') ||
          hasKey('filterable') ||
          hasKey('collApsible') ||
          hasKey('element_entityAssociation') ||
          hasKey('element_collapseTags') ||
          hasKey('element_openNewPage') ||
          hasKey('element_non_functional_div')
        "
      >
        <ElCheckbox
          v-model="data.element_permissions"
          v-if="hasKey('element_permissions')"
          label="开启权限"
        />
        <ElCheckbox
          v-model="data.element_non_functional_div"
          v-if="hasKey('element_non_functional_div')"
          label="无功能div"
        />
        <ElCheckbox
          v-if="hasKey('element_Propermissions')"
          v-model="data.element_Propermissions"
          @change="handleCheckChangeProPer"
          label="流程权限"
        />
        <ElCheckbox
          v-if="['0', '1'].includes(data.element_type) && data.element_control == 'button'"
          v-model="data.element_Processbutton"
          label="流程按钮"
          @change="handleCheckChangeProButton"
        />
        <ElCheckbox v-model="data.disabled" v-if="hasKey('disabled')" label="禁用" />
        <ElCheckbox v-if="hasKey('readonly')" v-model="data.readonly" label="只读" />
        <ElCheckbox v-model="data.clearable" label="是否可清除" v-if="hasKey('clearable')" />
        <ElCheckbox v-model="data.filterable" label="是否可搜索" v-if="hasKey('filterable')" />

        <ElCheckbox v-model="data.multiple" label="是否多选" v-if="hasKey('multiple')" />
        <!-- <ElCheckbox
          v-model="data.element_button_loading"
          label="是否loading"
          v-if="hasKey('element_button_loading')"
        /> -->
        <ElCheckbox v-model="data.collApsible" label="初始是否折叠" v-if="hasKey('collApsible')" />
        <ElCheckbox v-model="data.element_execl" label="EXECL上传" v-if="hasKey('element_execl')" />
        <ElCheckbox
          v-model="data.element_previewImages"
          label="是否开启预览图片"
          v-if="hasKey('element_previewImages')"
        />
        <ElCheckbox
          v-model="data.element_sideButton"
          label="是否并排按钮"
          v-if="hasKey('element_sideButton')"
        />

        <template v-if="data.element_type == '10' && data.element_control === 'button'">
          <ElCheckbox v-model="data.element_exportAll" label="全部导出" />
          <ElCheckbox v-model="data.element_isField" label="导出字段" />
        </template>
        <template v-if="hasKeyFrom('listselection')">
          <ElCheckbox
            v-model="data.element_fixedcolumn"
            label="固定左列"
            @change="handleFixedColumnLeft"
          />
        </template>
        <template v-if="hasKeyFrom('listselection')">
          <ElCheckbox
            v-model="data.element_fixedcolumnRight"
            label="固定右列"
            @change="handleFixedColumnRight"
          />
        </template>
        <template
          v-if="hasKeyFrom('listselection') && ['input', 'popText'].includes(data.element_control)"
        >
          <ElCheckbox v-model="data.element_summaryCurrentPage" label="当页汇总" />
          <ElCheckbox
            v-model="data.element_allSummary"
            label="全部汇总"
            @change="handleAllSummary"
          />
        </template>
        <template
          v-if="
            hasKey('element_entityAssociation') ||
            (['select'].includes(data.element_control) &&
              ['0', '2', '3'].includes(data.element_type))
          "
        >
          <ElCheckbox
            v-model="data.element_entityAssociation"
            label="实体关联"
            @change="handleEntityAssociation"
          />
        </template>
        <template v-if="hasKey('element_collapseTags')">
          <ElCheckbox v-model="data.element_collapseTags" label="合并选择显示" />
        </template>
        <template v-if="hasKey('element_openNewPage') && ['6'].includes(data.element_type)">
          <ElCheckbox v-model="data.element_openNewPage" label="是否新页面打开" />
        </template>
      </ElFormItem>
      <ElFormItem
        label="操作数据"
        v-if="
          (hasKeyFrom('listselection') &&
            !['button', 'buttonArea'].includes(data.element_control)) ||
          (hasKeyFrom('listselection') &&
            !['unit', 'button', 'copyRow', 'buttonArea', 'images'].includes(data.element_control))
        "
      >
        <template
          v-if="
            hasKeyFrom('listselection') && !['button', 'buttonArea'].includes(data.element_control)
          "
        >
          <ElCheckbox v-model="data.element_copyRow" label="复制行" @change="copyRowChange" />
        </template>
        <template
          v-if="
            hasKeyFrom('listselection') &&
            !['unit', 'button', 'copyRow', 'buttonArea', 'images'].includes(data.element_control)
          "
        >
          <ElCheckbox v-model="data.element_sort" label="排序" @change="sortChange" />
        </template>
        <template
          v-if="
            hasKeyFrom('listselection') &&
            !['unit', 'button', 'copyRow', 'buttonArea', 'images'].includes(data.element_control)
          "
        >
          <ElCheckbox v-model="data.element_sortNum" label="数字排序" @change="sortNumChange" />
        </template>
        <template
          v-if="
            hasKeyFrom('listselection') && !['button', 'buttonArea'].includes(data.element_control)
          "
        >
          <ElCheckbox v-model="data.element_cannotDelete" label="不可删除" />
        </template>
        <template
          v-if="
            hasKeyFrom('listselection') &&
            !['unit', 'button', 'copyRow', 'buttonArea', 'images'].includes(data.element_control)
          "
        >
          <ElCheckbox v-model="data.element_lineFeed" label="列表换行" />
        </template>
      </ElFormItem>
      <ElFormItem label="顶部外边距" v-if="hasKey('element_marginTop')">
        <ElInput v-model="data.element_marginTop" />
      </ElFormItem>
      <ElFormItem label="底部外边距" v-if="hasKey('element_marginBottom')">
        <ElInput v-model="data.element_marginBottom" />
      </ElFormItem>
      <ElFormItem
        :label="
          hasKey('widthOf') && hasKey('heightOf')
            ? '宽度/高度'
            : hasKey('widthOf')
            ? '宽度'
            : '高度'
        "
        v-if="hasKey('widthOf') || hasKey('heightOf')"
        style="display: flex; flex-direction: column"
      >
        <ElInput
          :placeholder="data.element_control == 'uploadForm' ? '请输入像素' : ''"
          v-model="data.widthOf"
          v-if="hasKey('widthOf')"
          style="flex: 1"
        />
        <ElInput
          :placeholder="data.element_control == 'uploadForm' ? '请输入像素' : ''"
          v-model="data.heightOf"
          v-if="hasKey('heightOf')"
          style="flex: 1"
        />
      </ElFormItem>
      <ElFormItem label="选择图标" v-if="hasKey('element_tipsIcon')">
        <ElInput v-model="data.element_tipsIcon" style="flex: 1" />
        <ElButton v-if="hasKey('element_tipsIcon')" @click="handlIconAdd('tips_icon')"
          >选择图标</ElButton
        >
      </ElFormItem>
      <ElFormItem label="提示内容" v-if="hasKey('element_tipsText')">
        <ElInput v-model="data.element_tipsText" />
      </ElFormItem>
      <ElFormItem
        label="弹窗宽度/高度"
        v-if="
          hasKey('element_diaologWidth') ||
          hasKey('element_diaologHeight') ||
          (['3', '12'].includes(data.element_type) && data.element_control === 'button')
        "
        style="display: flex; flex-direction: column"
      >
        <ElInput
          v-model="data.element_diaologWidth"
          v-if="
            hasKey('element_diaologWidth') ||
            (['3', '12'].includes(data.element_type) && data.element_control === 'button')
          "
          style="flex: 1"
        />
        <ElInput
          v-model="data.element_diaologHeight"
          v-if="
            hasKey('element_diaologHeight') ||
            (['3', '12'].includes(data.element_type) && data.element_control === 'button')
          "
          style="flex: 1"
        />
      </ElFormItem>

      <ElFormItem
        label="是否覆盖文件/显示上传列表"
        v-if="hasKey('element_showFileList') && hasKey('element_covers')"
      >
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.element_covers" />
        <ElSwitch
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.element_showFileList"
        />
      </ElFormItem>
      <!-- <ElFormItem label="是否可搜索" v-if="hasKey('filterable')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.filterable" />
      </ElFormItem> -->
      <ElFormItem label="是否显示字数" v-if="hasKey('showWordLimit')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.showWordLimit" />
      </ElFormItem>
      <ElFormItem
        :label="data.element_control == 'filePreview' ? '文件类型' : '控件类型'"
        v-if="
          hasKey('element_type') &&
          [
            'button',
            'time',
            'select',
            'uploadForm',
            'filePreview',
            'input',
            'popText',
            'userChoice',
          ].includes(data.element_control)
        "
      >
        <template v-if="data.element_control == 'uploadForm'">
          <ElSelect v-model="data.element_type">
            <ElOption
              v-for="item in UploadSelectType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :disabled="item.hidden"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'select' && hasKeyFrom('listselection')">
          <ElSelect v-model="data.element_type" @change="handleSelectChange1">
            <ElOption
              v-for="item in SelectType1"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :disabled="item.hidden"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'select' && !hasKeyFrom('listselection')">
          <ElSelect v-model="data.element_type" @change="handleSelectChange">
            <ElOption
              v-for="item in SelectType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :disabled="item.hidden"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'button'">
          <ElSelect v-model="data.element_type" @change="handleSelectChangeButton">
            <ElOption
              v-for="item in buttonType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :disabled="item.hidden"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'time'">
          <ElSelect v-model="data.element_type">
            <ElOption
              v-for="item in dateDataType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'filePreview'">
          <ElSelect v-model="data.element_type">
            <ElOption
              v-for="item in fileType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'input'">
          <ElSelect v-model="data.element_type">
            <ElOption
              v-for="item in inputType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'popText'">
          <ElSelect v-model="data.element_type" @change="handleSelectPlacementChange">
            <ElOption
              v-for="item in popType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </ElSelect>
        </template>
        <template v-if="data.element_control == 'userChoice'">
          <ElSelect v-model="data.element_type">
            <ElOption
              v-for="item in usersType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </ElSelect>
        </template>
      </ElFormItem>
      <ElFormItem
        label="显示位置"
        v-if="
          hasKey('element_placement') &&
          ['button', 'popText', 'userChoice', 'tips'].includes(data.element_control)
        "
      >
        <ElRadioGroup v-model="data.element_placement">
          <ElRadioButton label="top">顶部</ElRadioButton>
          <ElRadioButton label="bottom">底部</ElRadioButton>
          <ElRadioButton label="left">左边</ElRadioButton>
          <ElRadioButton label="right">右边</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>
      <template v-if="data.element_control === 'time' || data.element_control === 'date'">
        <ElFormItem label="日期格式">
          <ElInput
            v-model="data.element_format"
            :placeholder="
              data.element_type == 'time'
                ? 'HH:mm:ss'
                : data.element_type == 'date'
                ? 'yyyy-MM-dd'
                : data.element_type == 'datetime'
                ? 'yyyy-MM-dd HH:mm:ss'
                : ''
            "
          />
        </ElFormItem>
      </template>
      <template
        v-if="
          (data.element_control === 'time' || data.element_control === 'date') &&
          (data.element_type === 'time' ||
            data.element_type === 'datetime' ||
            data.element_type === 'datetimerange')
        "
      >
        <ElFormItem label="默认时间段">
          <ElInput
            v-model="data.element_default_time_period"
            :placeholder="
              data.element_type == 'time'
                ? '00:00:00,23:59:59'
                : data.element_type == 'datetimerange'
                ? '00:00:00,23:59:59'
                : data.element_type == 'datetime'
                ? '00:00:00,23:59:59'
                : ''
            "
          />
        </ElFormItem>
      </template>
      <!-- <ElFormItem label="日期类型" v-if="hasKey('element_date_type')">
        <ElSelect v-model="data.element_date_type">
          <ElOption
            v-for="item in dateDataTimeType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem> -->
      <ElFormItem
        label="开关ON值/OFF值"
        style="display: flex; flex-direction: column"
        v-if="hasKey('element_activeValue') && hasKey('element_inactiveValue')"
      >
        <ElInput v-model="data.element_activeValue" style="flex: 1" />
        <ElInput v-model="data.element_inactiveValue" style="flex: 1" />
      </ElFormItem>
      <ElFormItem
        label="开关ON描述/OFF描述"
        style="display: flex; flex-direction: column"
        v-if="hasKey('activeText') && hasKey('inactiveText')"
      >
        <ElInput v-model="data.activeText" style="flex: 1" />
        <ElInput v-model="data.inactiveText" style="flex: 1" />
      </ElFormItem>
      <template v-if="['10'].includes(data.element_type) && data.element_control === 'button'">
        <ElFormItem label="字段名称">
          <ElInput v-model="data.element_fieldName" />
        </ElFormItem>
        <ElFormItem label="选择字段">
          <ElInput v-model="data.element_selectField" />
        </ElFormItem>
        <ElFormItem label="导出文件名称">
          <ElInput v-model="data.element_exportFileName" />
        </ElFormItem>
      </template>
      <ElFormItem
        label="前缀/后缀内容"
        v-if="hasKey('element_nameprefix') || hasKey('element_namesuffix')"
      >
        <ElButton
          v-if="hasKey('element_nameprefix')"
          @click="handlIconAdd('prefix')"
          style="width: 50%"
          >选择前缀图标</ElButton
        >
        <ElButton
          v-if="hasKey('element_namesuffix')"
          @click="handlIconAdd('suffix')"
          style="width: 50%; margin-left: 0"
          >选择后缀图标</ElButton
        >
        <ElInput
          v-if="hasKey('element_nameprefix')"
          v-model="data.element_nameprefix"
          style="flex: 1"
        />
        <ElInput
          v-if="hasKey('element_namesuffix')"
          v-model="data.element_namesuffix"
          style="flex: 1"
        />
      </ElFormItem>
      <ElFormItem
        label="前置/后置标签"
        v-if="hasKey('element_prepend') && hasKey('element_append')"
        style="display: flex; flex-direction: column"
      >
        <!-- <ElButton @click="handlIconAdd('prepend')" style="width: 50%">选择前置图标</ElButton>
        <ElButton @click="handlIconAdd('append')" style="width: 50%; margin-left: 0"
          >选择后置图标</ElButton
        > -->
        <ElInput v-if="hasKey('element_prepend')" v-model="data.element_prepend" style="flex: 1" />
        <ElInput v-if="hasKey('element_append')" v-model="data.element_append" style="flex: 1" />
      </ElFormItem>
      <ElFormItem
        label="前置标签"
        v-else-if="hasKey('element_prepend')"
        style="display: flex; flex-direction: column"
      >
        <!-- <ElButton @click="handlIconAdd('prepend')" style="width: 50%">选择前置图标</ElButton>
        <ElButton @click="handlIconAdd('append')" style="width: 50%; margin-left: 0"
          >选择后置图标</ElButton
        > -->
        <ElInput v-if="hasKey('element_prepend')" v-model="data.element_prepend" style="flex: 1" />
        <ElInput v-if="hasKey('element_append')" v-model="data.element_append" style="flex: 1" />
      </ElFormItem>
      <ElFormItem
        label="后置标签"
        v-else-if="hasKey('element_append')"
        style="display: flex; flex-direction: column"
      >
        <!-- <ElButton @click="handlIconAdd('prepend')" style="width: 50%">选择前置图标</ElButton>
        <ElButton @click="handlIconAdd('append')" style="width: 50%; margin-left: 0"
          >选择后置图标</ElButton
        > -->
        <ElInput v-if="hasKey('element_prepend')" v-model="data.element_prepend" style="flex: 1" />
        <ElInput v-if="hasKey('element_append')" v-model="data.element_append" style="flex: 1" />
      </ElFormItem>
      <ElFormItem
        label="分割线图标/文字"
        v-if="hasKeyOptions('element_IconsText') && data.element_control === 'divider'"
      >
        <ElButton
          v-if="hasKeyOptions('element_IconsText') && data.element_control === 'divider'"
          @click="handlIconAdd('content_text')"
          style="width: 50%"
          >选择图标</ElButton
        >
        <ElInput
          v-if="hasKeyOptions('element_IconsText') && data.element_control === 'divider'"
          v-model="data.options.element_IconsText"
          style="flex: 1"
        />
      </ElFormItem>
      <ElFormItem label="分隔符内容位置" v-if="hasKeyOptions('content_position')">
        <ElSelect v-model="data.options.content_position">
          <ElOption
            v-for="item in dividerTextIconsType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="复制字段" v-if="hasKey('element_copyRowFields')">
        <draggable
          tag="ul"
          item-key="index"
          ghostClass="ghost"
          handle=".drag-item"
          :group="{ name: 'options' }"
          :list="data.element_copyRowFields"
        >
          <template #item="{ element, index }">
            <div style="margin-bottom: 5px; display: flex">
              <ElInput placeholder="字段名称" v-model="element.fields" />
              <ElButton
                type="primary"
                circle
                style="margin-left: 5px"
                @click="handleRowFieldsRemove(index)"
              >
                <SvgIcon name="delete" />
              </ElButton>
            </div>
          </template>
        </draggable>

        <div style="margin-left: 10px">
          <ElButton type="text" @click="handleRowFieldsList"> 添加一行 </ElButton>
        </div>
      </ElFormItem>

      <ElFormItem
        :label="
          data.element_control === 'foldedPanel'
            ? '面板颜色'
            : data.element_control === 'divider'
            ? '字体颜色'
            : '颜色'
        "
        v-if="hasKey('element_color')"
      >
        <ElColorPicker
          @change="ChangeColor"
          v-model="data.element_color"
          show-alpha
          :predefine="predefineColors"
          style="flex: 1"
        />
        <ElSelect
          v-if="!['foldedPanel', 'divider'].includes(data.element_control)"
          v-model="data.element_button_type"
          style="flex: 1"
        >
          <ElOption
            v-for="item in buttonColorType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="字体大小" v-if="hasKey('fontSize')">
        <ElRadioGroup v-model="data.fontSize" v-if="['foldedPanel'].includes(data.element_control)">
          <ElRadioButton label="0">小</ElRadioButton>
          <ElRadioButton label="1">中</ElRadioButton>
          <ElRadioButton label="2">大</ElRadioButton>
        </ElRadioGroup>

        <ElInput v-model="data.fontSize" v-else />
      </ElFormItem>
      <ElFormItem label="完成类型" v-if="hasKey('element_close')">
        <ElSelect v-model="data.element_close" @change="handleClose">
          <ElOption
            v-for="item in saveType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
            :disabled="item.hidden"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem
        label="清除选择数据"
        v-if="
          ['button'].includes(data.element_control) &&
          ['0', '1', '3', '4'].includes(data.element_close)
        "
      >
        <ElSwitch
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.element_clearSelectiondata"
        />
      </ElFormItem>
      <ElFormItem label="枚举选择项" v-if="hasKey('element_enum')">
        <ElSelect v-model="data.element_enum">
          <ElOption
            v-for="item in enumType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="对应元素" v-if="hasKey('element_corresponding')">
        <ElInput v-model="data.element_corresponding" />
      </ElFormItem>
      <ElFormItem label="枚举代码" v-if="hasKey('element_reqenum')">
        <ElInput v-model="data.element_reqenum" />
      </ElFormItem>
      <!-- <ElFormItem label="参数传输" v-if="hasKey('element_parameter')">
        <ElInput v-model="data.element_parameter" placeholder="A=$U{123}&B=$S{222}" />
      </ElFormItem> -->
      <ElFormItem label="联动类型" v-if="hasKey('element_linkage')">
        <ElSelect v-model="data.element_linkage" @change="handleChangeLink" clearable>
          <ElOption
            v-for="item in LinkageType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem
        label="子级元素"
        v-if="data.element_linkage === '0' || data.element_linkage === '2'"
      >
        <ElInput v-model="data.element_bound" />
      </ElFormItem>
      <template v-if="data.element_linkage === '1' || data.element_linkage === '2'">
        <ElFormItem label="父级元素">
          <ElInput v-model="data.element_child" />
        </ElFormItem>
        <ElFormItem label="关联参数名">
          <ElInput v-model="data.element_ParameterName" />
        </ElFormItem>
      </template>
      <template v-if="data.element_Processbutton">
        <ElFormItem label="发起流程选择节点人员">
          <ElSwitch
            inline-prompt
            active-text="是"
            inactive-text="否"
            v-model="data.element_initiateProceSelectNode"
          />
        </ElFormItem>
        <ElFormItem label="指向流程标识">
          <ElInput v-model="data.element_Processidentifier" />
        </ElFormItem>
        <ElFormItem label="流程默认变量">
          <ElInput v-model="data.element_Processdefault" />
        </ElFormItem>
        <ElFormItem label="流程元素变量">
          <ElInput v-model="data.element_Processelement" />
        </ElFormItem>
      </template>

      <template v-if="data.element_Propermissions">
        <ElFormItem label="流程只读权限标识">
          <ElInput v-model="data.element_Propermissionide" />
        </ElFormItem>
        <ElFormItem label="流程修改权限标识">
          <ElInput v-model="data.element_Processmodifications" />
        </ElFormItem>
      </template>
      <ElFormItem
        label="弹出名称"
        v-if="
          (data.element_control == 'button' && ['3', '12'].includes(data.element_type)) ||
          (hasKey('element_upName') && data.element_control === 'popText') ||
          (hasKey('element_upName') && data.element_control === 'userChoice')
        "
      >
        <ElInput v-model="data.element_upName" />
      </ElFormItem>
      <ElFormItem label="指定表单" v-if="hasKey('element_Theunit')">
        <ElInput v-model="data.element_Theunit" />
      </ElFormItem>
      <ElFormItem
        label="表单验证SQL编号"
        v-if="
          hasKey('element_sqlFormCode') &&
          ['0', '1'].includes(data.element_type) &&
          data.element_control == 'button'
        "
      >
        <ElInput v-model="data.element_sqlFormCode" />
      </ElFormItem>
      <ElFormItem
        label="关联子表"
        v-if="data.element_type === '4' && data.element_control === 'button'"
      >
        <ElInput v-model="data.element_RelatedchildTable" />
      </ElFormItem>
      <ElFormItem
        label="关联子表字段"
        v-if="
          (['0', '1'].includes(data.element_type) && data.element_control === 'button') ||
          (data.element_type === '4' && data.element_control === 'button')
        "
      >
        <ElInput v-model="data.element_subtablefields" />
      </ElFormItem>
      <ElFormItem label="指定列表" v-if="hasKey('element_Thelist')">
        <ElInput v-model="data.element_Thelist" />
      </ElFormItem>
      <ElFormItem label="指定字段" v-if="hasKey('element_TheField')">
        <ElInput v-model="data.element_TheField" />
      </ElFormItem>
      <ElFormItem
        label="列表验证SQL编号"
        v-if="
          hasKey('element_sqlListCode') &&
          ['0', '1'].includes(data.element_type) &&
          data.element_control == 'button'
        "
      >
        <ElInput v-model="data.element_sqlListCode" />
      </ElFormItem>
      <ElFormItem
        :label="
          hasKey('element_entityAssociation') && data.element_entityAssociation
            ? '关联字段（实体值/本页面值）'
            : '关联字段（子页面值/本页面值）'
        "
        v-if="
          data.element_control === 'popText' ||
          (hasKey('element_entityAssociation') && data.element_entityAssociation)
        "
      >
        <draggable
          tag="ul"
          item-key="index"
          ghostClass="ghost"
          handle=".drag-item"
          :group="{ name: 'options' }"
          :list="data.element_list"
        >
          <template #item="{ element, index }">
            <div style="margin-bottom: 5px; display: flex">
              <ElInput
                v-if="data.element_control === 'popText'"
                placeholder="子页面值"
                v-model="element.pagesValue"
              />
              <ElInput
                v-if="hasKey('element_entityAssociation') && data.element_entityAssociation"
                placeholder="实体值"
                v-model="element.entityValue"
              />
              <ElInput placeholder="本页面值" v-model="element.parentValue" />
              <ElButton
                type="primary"
                circle
                style="margin-left: 5px"
                @click="handleOptionsRemove(index)"
              >
                <SvgIcon name="delete" />
              </ElButton>
            </div>
          </template>
        </draggable>

        <div style="margin-left: 10px">
          <ElButton type="text" @click="handleInsertList"> 添加一行 </ElButton>
        </div>
      </ElFormItem>
      <ElFormItem
        :label="['images'].includes(data.element_control) ? '图片地址' : 'Action'"
        v-if="
          (hasKey('element_action') &&
            !['uploadForm', 'cascader'].includes(data.element_control)) ||
          (hasKey('element_action') &&
            data.element_control === 'uploadForm' &&
            data.element_execl === true) ||
          (hasKey('element_parameterType') && data.element_parameterType == '1') ||
          (hasKey('element_entityAssociation') && data.element_entityAssociation)
        "
      >
        <ElInput v-model="action" @input="handleElementAction" />
      </ElFormItem>
      <ElFormItem label="文件上传最大数量" v-if="hasKey('element_limit')">
        <ElInputNumber :min="1" v-model="data.element_limit" />
      </ElFormItem>
      <ElFormItem label="属性编码" v-if="hasKey('element_coding') && data.element_execl === false">
        <ElInput v-model="data.element_coding" />
      </ElFormItem>
      <ElFormItem
        label="属性ID"
        v-if="hasKey('element_attributeID') && data.element_execl === false"
      >
        <ElInput v-model="data.element_attributeID" />
      </ElFormItem>
      <ElFormItem
        label="文件地址"
        v-if="hasKey('element_fileress') && data.element_execl === false"
      >
        <ElInput v-model="data.element_fileress" />
      </ElFormItem>
      <ElFormItem
        label="文件大小（mb）"
        v-if="hasKey('element_filesize') && data.element_execl === false"
      >
        <ElInputNumber :min="1" v-model="data.element_filesize" placeholder="不填默认10MB" />
      </ElFormItem>
      <ElFormItem label="列表数据选择" v-if="hasKey('element_listdataSelect')">
        <ElSelect v-model="data.element_listdataSelect">
          <ElOption
            v-for="item in listDataType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem
        label="弹出单元 / 动态单元"
        v-if="hasKey('element_popunit') || hasKey('element_dynamicUnit')"
      >
        <ElSwitch
          v-if="hasKey('element_popunit')"
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.element_popunit"
        />
        <ElSwitch
          v-if="hasKey('element_dynamicUnit')"
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.element_dynamicUnit"
          @change="handleDynamicUnitChange"
        />
      </ElFormItem>
      <ElFormItem label="动态编号" v-if="hasKey('element_dynamicUnit') && data.element_dynamicUnit">
        <ElInput v-model="data.element_dynamicCode" />
      </ElFormItem>
      <ElFormItem label="展示类型" v-if="hasKey('element_foldShowType')">
        <ElSelect v-model="data.element_foldShowType">
          <ElOption
            v-for="item in FoldShowType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem
        :label="data.element_control === 'steps' ? '图标/文字' : '按钮图标/文字'"
        v-if="hasKey('element_IconsText')"
      >
        <ElButton
          v-if="hasKey('element_IconsText')"
          @click="handlIconAdd('Icons')"
          style="width: 50%"
          >选择按钮图标</ElButton
        >
        <ElInput
          v-if="hasKey('element_IconsText')"
          v-model="data.element_IconsText"
          style="flex: 1"
        />
      </ElFormItem>
      <!-- hasKeyOptions('direction') ||  -->
      <ElFormItem label="展示类型" v-if="hasKey('direction')">
        <!-- <ElSelect
          v-if="hasKeyOptions('direction')"
          v-model="data.options.direction"
          @change="handleChangeDirecitons"
        >
          <ElOption
            v-for="item in dividerNormalType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          /> -->
        <!-- </ElSelect> -->
        <ElSelect v-if="hasKey('direction')" v-model="data.direction">
          <ElOption
            v-for="item in dividerNormalType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="分隔符样式" v-if="hasKeyOptions('border_style')">
        <ElSelect v-model="data.options.border_style">
          <ElOption
            v-for="item in dividerStyleType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="最小值" v-if="hasKey('minlength')">
        <ElInputNumber :min="0" :max="100" v-model="data.minlength" />
      </ElFormItem>
      <ElFormItem label="数据精度" v-if="hasKey('element_precision')">
        <ElInput v-model.number="data.element_precision" />
      </ElFormItem>
      <ElFormItem
        label="最大输入长度"
        v-if="hasKey('maxlength') && !['slider', 'rate'].includes(data.element_control)"
      >
        <ElInput v-model.number="data.maxlength" />
      </ElFormItem>
      <ElFormItem
        :label="data.element_control === 'slider' ? '最大值' : '最大分值'"
        v-if="hasKey('maxlength') && ['slider', 'rate'].includes(data.element_control)"
      >
        <ElInputNumber :min="0" :max="100" v-model="data.maxlength" />
      </ElFormItem>
      <ElFormItem label="步长" v-if="hasKey('step')">
        <ElInputNumber :min="0" :max="100" v-model="data.step" />
      </ElFormItem>
      <ElFormItem label="是否开始选择范围" v-if="hasKey('range')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.range" />
      </ElFormItem>

      <ElFormItem label="是否允许半选" v-if="hasKey('allowHalf')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.allowHalf" />
      </ElFormItem>
      <ElFormItem
        label="时间戳位置"
        v-if="hasKey('element_placement') && data.element_control == 'timeLine'"
      >
        <ElSelect v-model="data.element_placement">
          <ElOption
            v-for="item in timeLinetopOrBotType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="节点成功" v-if="hasKey('element_typeSuccess')">
        <ElSelect v-model="data.element_typeSuccess">
          <ElOption
            v-for="item in timeLineColorType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="节点失败" v-if="hasKey('element_typeError')">
        <ElSelect v-model="data.element_typeError">
          <ElOption
            v-for="item in timeLineColorType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="间距" v-if="hasKey('element_space')">
        <ElInput v-model.number="data.element_space" />
      </ElFormItem>
      <ElFormItem label="当前激活步骤" v-if="hasKey('element_active')">
        <ElInput v-model.number="data.element_active" />
      </ElFormItem>
      <ElFormItem label="当前步骤的状态" v-if="hasKey('element_processStatus')">
        <ElSelect v-model="data.element_processStatus" clearable>
          <ElOption
            v-for="item in StepstatusType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="结束步骤的状态" v-if="hasKey('element_finishStatus')">
        <ElSelect v-model="data.element_finishStatus" clearable>
          <ElOption
            v-for="item in StepstatusType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="居中对齐" v-if="hasKey('element_alignCenter')">
        <ElSwitch
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.element_alignCenter"
        />
      </ElFormItem>
      <ElFormItem label="应用简洁风格" v-if="hasKey('element_simple')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.element_simple" />
      </ElFormItem>
      <ElFormItem label="标签宽度是否自撑开" v-if="hasKeyOptions('stretch')">
        <ElSwitch
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.options.stretch"
        />
      </ElFormItem>
      <ElFormItem label="标签所在位置" v-if="hasKeyOptions('tab_position')">
        <ElRadioGroup v-model="data.options.tab_position">
          <ElRadioButton label="top">顶部</ElRadioButton>
          <ElRadioButton label="right">右侧</ElRadioButton>
          <ElRadioButton label="left">左侧</ElRadioButton>
          <ElRadioButton label="bottom">底部</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="风格类型" v-if="hasKeyOptions('type') && data.element_control == 'tabs'">
        <ElRadioGroup v-model="data.options.type">
          <ElRadioButton
            style="flex: 1"
            v-for="item in StyleType"
            :label="item.value"
            :key="item.value"
            >{{ item.label }}</ElRadioButton
          >
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="栅格间隔" v-if="hasKeyOptions('gutter')">
        <ElInputNumber v-model.number="data.options.gutter" :min="0" />
      </ElFormItem>
      <ElFormItem label="垂直对齐方式" v-if="hasKeyOptions('align')">
        <ElRadioGroup v-model="data.options.align">
          <ElRadioButton label="top">顶部对齐</ElRadioButton>
          <ElRadioButton label="middle">居中对齐</ElRadioButton>
          <ElRadioButton label="bottom">底部对齐</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>

      <ElFormItem label="水平排列方式" v-if="hasKeyOptions('justify')">
        <ElSelect v-model="data.options.justify">
          <ElOption value="start" label="左对齐" />
          <ElOption value="end" label="右对齐" />
          <ElOption value="center" label="居中" />
          <ElOption value="space-around" label="两侧间隔相等" />
          <ElOption value="space-between" label="两端对齐" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="传单数据(选中的单条数据)回显父子全数据" v-if="hasKey('getCheckedNodes')">
        <ElSwitch
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.getCheckedNodes"
        />
      </ElFormItem>
      <ElFormItem label="动态加载子节点" v-if="hasKey('dynamicLoading')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.dynamicLoading" />
      </ElFormItem>
      <ElFormItem label="父子关联选中" v-if="hasKey('checkStrictly')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.checkStrictly" />
      </ElFormItem>
      <ElFormItem label="仅显示最后一级" v-if="hasKey('showAllLevels')">
        <ElSwitch inline-prompt active-text="是" inactive-text="否" v-model="data.showAllLevels" />
      </ElFormItem>
      <ElFormItem label="值的阶级" v-if="hasKey('element_classValue')">
        <ElInput @input="handleInput" v-model.number="data.element_classValue" />
      </ElFormItem>
      <ElFormItem label="副字段" v-if="hasKey('element_subfield')">
        <ElInput v-model="data.element_subfield" placeholder="以“,”分割保存" />
      </ElFormItem>

      <ElFormItem label="远端数据" v-if="hasKey('options') && data.element_control === 'cascader'">
        <ElSpace direction="vertical" alignment="start">
          <ElInput v-model="data.element_action">
            <template #prepend>
              <span class="widthPerpend"> 远端方法 </span>
            </template>
          </ElInput>
          <ElInput v-model="data.options.props.label" readonly>
            <template #prepend>
              <span class="widthPerpend">标签</span>
            </template>
          </ElInput>
          <ElInput v-model="data.options.props.value" readonly>
            <template #prepend>
              <span class="widthPerpend"> 值 </span>
            </template>
          </ElInput>
          <ElInput v-model="data.options.props.disabled" readonly>
            <template #prepend>
              <span class="widthPerpend"> 是否禁用 </span>
            </template>
          </ElInput>
          <ElInput v-model="data.options.props.children" readonly>
            <template #prepend>
              <span class="widthPerpend"> 子选项 </span>
            </template>
          </ElInput>
        </ElSpace>
      </ElFormItem>
      <ElFormItem label="事件选择" v-if="data.element_control === 'cascader'">
        <ElSelect clearable v-model="cascaderFunction" @change="handleCascaderChange">
          <ElOption
            v-for="item in CascaderFunction"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="传参类型" v-if="hasKey('element_parameterType')">
        <ElSelect @change="handleSqlChange" clearable v-model="data.element_parameterType">
          <ElOption
            v-for="item in ParameterType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem
        label="赋值sql"
        v-if="hasKey('element_parameterType') && data.element_parameterType == '0'"
      >
        <ElInput v-model="data.element_sql" />
      </ElFormItem>
      <ElFormItem
        :label="['steps', 'timeLine'].includes(data.element_control) ? '点击事件' : '绑定事件'"
        v-if="hasKey('actionNo')"
      >
        <ElInput v-model="data.actionNo" />
      </ElFormItem>
      <ElFormItem label="字段绑定事件" v-if="hasKeyFrom('listselection')">
        <ElInput v-model="data.element_fieldBinding" />
      </ElFormItem>

      <ElFormItem label="上传成功钩子" v-if="hasKey('element_onSuccess')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_onSuccess')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem label="上传之前钩子" v-if="hasKey('element_beforeUpload')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_beforeUpload')"
          >设置</ElButton
        >
      </ElFormItem>

      <ElFormItem label="移除文件钩子" v-if="hasKey('element_onRemove')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_onRemove')">设置</ElButton>
      </ElFormItem>

      <ElFormItem label="Js前置回调" v-if="hasKey('element_jsFront')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_jsFront')">设置</ElButton>
      </ElFormItem>
      <ElFormItem label="Js成功回调" v-if="hasKey('element_jsCallback')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_jsCallback')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem
        label="Js失败回调"
        v-if="
          hasKey('element_jsfailCallback') ||
          (['0', '1'].includes(data.element_type) && data.element_control == 'button')
        "
      >
        <ElButton style="width: 100%" @click="handlClickJsFront('element_jsfailCallback')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem
        label="Js错误回调"
        v-if="
          hasKey('element_jserrorCallback') ||
          (['0', '1'].includes(data.element_type) && data.element_control == 'button')
        "
      >
        <ElButton style="width: 100%" @click="handlClickJsFront('element_jserrorCallback')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem
        label="Js关闭页面回调"
        v-if="
          hasKey('element_closeCallback') ||
          (['3'].includes(data.element_type) && data.element_control == 'button')
        "
      >
        <ElButton style="width: 100%" @click="handlClickJsFront('element_closeCallback')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem label="自定义代码" v-if="hasKey('element_custom')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_custom')">设置</ElButton>
      </ElFormItem>
      <ElFormItem label="传递方法（index:下标）" v-if="hasKey('element_transferMethod')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_transferMethod')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem label="回传方法（val:值;index:下标）" v-if="hasKey('element_returnMethod')">
        <ElButton style="width: 100%" @click="handlClickJsFront('element_returnMethod')"
          >设置</ElButton
        >
      </ElFormItem>
      <ElFormItem label="属性自定义" v-if="hasKey('element_div')">
        <ElInput type="textarea" v-model="data.element_div" />
      </ElFormItem>
    </ElForm>
    <ElDialog
      :model-value="JsPre"
      title="设置"
      :before-close="handleCloseFront"
      :destroy-on-close="true"
    >
      <ElButton
        style="margin-bottom: 10px"
        @click="handlIconAdd('custom')"
        v-if="hasKey('element_custom')"
        >选择图标</ElButton
      >
      <WebEditor
        v-model="JsModel"
        :language="language"
        width="100%"
        height="500px"
        @change="hanldUpdateWebJsFront"
      />
    </ElDialog>
    <ElDialog
      :model-value="IconAdd"
      title="设置图标"
      :before-close="handleCloseIcons"
      width="70%"
      lock-scroll
      align-center
      :destroy-on-close="true"
    >
      <ElementIcons @update:icons="handleHTML" />
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import draggable from 'vuedraggable';
  import {
    buttonType,
    enumType,
    saveType,
    listDataType,
    dateDataType,
    buttonColorType,
    SelectType,
    SelectType1,
    UploadSelectType,
    ButtonDataType,
    LinkageType,
    FoldShowType,
    dividerNormalType,
    dividerStyleType,
    dividerTextIconsType,
    timeLinetopOrBotType,
    timeLineColorType,
    StepstatusType,
    StyleType,
    CascaderFunction,
    ParameterType,
    fileType,
    inputType,
    copyRow,
    popType,
    usersType,
  } from '@/types/element';
  // import { elementPermissions } from '@/api/Unitregein';
  import { debounce } from 'lodash-es';
  const cascaderFunction = ref<string>();
  const JsPre = ref<boolean>(false);
  const IconAdd = ref<boolean>(false);
  const IconsName = ref<string>();
  const JsModel = ref<string>();
  const JsName = ref<string>();
  const language = ref<string>();
  const action = ref<string>('');
  const predefineColors = ref<Array<string>>([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
  ]);
  const emit = defineEmits<Emits>();
  interface Emits {
    (e: 'update:select', val: any): void;
  }
  const props = defineProps({
    select: {
      type: Object,
    },
    json: {
      type: Object,
    },
    dataUnit: {
      type: Object,
    },
  });
  const data = ref<any>(props.select);
  const dataMap = ref<any>(props.json);
  const dataUnit = ref<any>(props.dataUnit);
  watch(
    () => props.select,
    (val) => {
      if (val) {
        data.value = val;
        action.value = val.element_action;
      }
    },
  );
  watch(
    () => props.dataUnit,
    (val) => (dataUnit.value = val),
  );
  watch(
    () => props.json,
    (val) => (dataMap.value = val),
  );
  watch(data, (val) => emit('update:select', val));
  // { deep: true }

  const hasKey = (key: string) => Object.keys(data.value).includes(key);
  const hasKeyFrom = (key: string) => Object.keys(dataMap.value.config).includes(key);
  const hasKeyOptions = (key: string) => {
    if (data.value.options) {
      return Object.keys(data.value.options).includes(key);
    }
  };
  const handleCascaderChange = (value: string) => {
    data.value.actionNo = value;
  };
  // 显示弹出层
  const handlClickJsFront = async (value: string) => {
    JsName.value = value;
    if (value === 'element_custom') {
      language.value = 'html';
    } else {
      language.value = 'javascript';
    }
    switch (value) {
      case 'element_onSuccess':
        JsModel.value = data.value.element_onSuccess;
        break;
      case 'element_beforeUpload':
        JsModel.value = data.value.element_beforeUpload;
        break;
      case 'element_jsFront':
        JsModel.value = data.value.element_jsFront;
        break;
      case 'element_jsCallback':
        JsModel.value = data.value.element_jsCallback;
        break;
      case 'element_onRemove':
        JsModel.value = data.value.element_onRemove;
        break;
      case 'element_custom':
        JsModel.value = data.value.element_custom;
        break;
      case 'element_transferMethod':
        JsModel.value = data.value.element_transferMethod;
        break;
      case 'element_returnMethod':
        JsModel.value = data.value.element_returnMethod;
        break;
      case 'element_jsfailCallback':
        JsModel.value = data.value.element_jsfailCallback;
        break;
      case 'element_jserrorCallback':
        JsModel.value = data.value.element_jserrorCallback;
        break;
      case 'element_closeCallback':
        JsModel.value = data.value.element_closeCallback;
        break;
    }
    JsPre.value = !JsPre.value;
  };
  // 关闭弹出层
  const handleCloseFront = async () => {
    JsPre.value = !JsPre.value;
  };
  // 编辑器返回值
  const hanldUpdateWebJsFront = async (value: any) => {
    switch (JsName.value) {
      case 'element_onSuccess':
        data.value.element_onSuccess = value;
        break;
      case 'element_beforeUpload':
        data.value.element_beforeUpload = value;
        break;
      case 'element_jsFront':
        data.value.element_jsFront = value;
        break;
      case 'element_jsCallback':
        data.value.element_jsCallback = value;
        break;
      case 'element_onRemove':
        data.value.element_onRemove = value;
        break;
      case 'element_custom':
        data.value.element_custom = value;
        break;
      case 'element_transferMethod':
        data.value.element_transferMethod = value;
        break;
      case 'element_returnMethod':
        data.value.element_returnMethod = value;
        break;
      case 'element_jsfailCallback':
        data.value.element_jsfailCallback = value;
        break;
      case 'element_jserrorCallback':
        data.value.element_jserrorCallback = value;
        break;
      case 'element_closeCallback':
        data.value.element_closeCallback = value;
        break;
    }
  };

  const handlIconAdd = async (value: string) => {
    IconsName.value = value;
    IconAdd.value = !IconAdd.value;
  };
  const handleInput = debounce(async (value: string) => {
    if (!/^[0-9]*$/.test(value)) {
      ElMessage.error('请输入数字！');
      data.value.element_classValue = '';
      return;
    }
  }, 500);
  // debounce, throttle
  const handleElementAction = debounce(() => {
    data.value.element_action = action.value;
  }, 500);
  const handleHTML = (value) => {
    if (IconsName.value == 'prefix') {
      data.value.element_nameprefix = value;
    } else if (IconsName.value == 'suffix') {
      data.value.element_namesuffix = value;
    } else if (IconsName.value == 'prepend') {
      data.value.element_prepend = value;
    } else if (IconsName.value == 'prepend') {
      data.value.element_append = value;
    } else if (IconsName.value == 'custom') {
      data.value.element_custom = value;
      JsModel.value = JsModel.value + value;
    } else if (IconsName.value == 'Icons') {
      data.value.element_IconsText = value;
    } else if (IconsName.value == 'content_text') {
      data.value.options.element_IconsText = value;
    } else if (IconsName.value == 'tips_icon') {
      data.value.element_tipsIcon = value;
    }
    IconAdd.value = !IconAdd.value;
  };
  const handleCloseIcons = () => {
    IconAdd.value = !IconAdd.value;
  };
  const ChangeColor = async (value: string) => {
    if (value == null && data.value.element_color) {
      data.value.element_color = '';
    }
  };
  const handleInsertList = () => {
    if (hasKey('element_entityAssociation') && data.value.element_entityAssociation) {
      data.value.element_list.push({
        parentValue: '',
        entityValue: '',
      }) as Array<ButtonDataType>;
    } else {
      data.value.element_list.push({
        pagesValue: '',
        parentValue: '',
      }) as Array<ButtonDataType>;
    }
  };
  const handleOptionsRemove = debounce(async (index: number) => {
    if (
      data.value.element_control === 'popText' ||
      (hasKey('element_entityAssociation') && data.value.element_entityAssociation)
    ) {
      if (data.value.element_list.length === 1) {
        ElMessage.warning('至少保留一个');
        return;
      }
      data.value.element_list.splice(index, 1);
    }
  }, 500);
  const handleSelectChangeButton = (value: string) => {
    if (!['3', '12'].includes(value)) {
      if (data.value.element_upName) delete data.value.element_upName;
      if (data.value.element_diaologWidth) delete data.value.element_diaologWidth;
      if (data.value.element_diaologHeight) delete data.value.element_diaologHeight;
    } else {
      data.value.element_upName = '';
      if (value == '12') {
        data.value.element_diaologWidth = '800';
        data.value.element_diaologHeight = '600';
      } else {
        data.value.element_diaologWidth = '';
        data.value.element_diaologHeight = '';
      }
    }
    if (value != '1') {
      if (data.value.element_subtablefields) delete data.value.element_subtablefields;
    }
    if (value != '4') {
      if (data.value.element_RelatedchildTable) delete data.value.element_RelatedchildTable;
      if (data.value.element_subtablefields) delete data.value.element_subtablefields;
    }
    if (value == '6') {
      data.value.element_openNewPage = false;
    } else {
      delete data.value.element_openNewPage;
    }
    if (!['0', '1'].includes(value)) {
      if (data.value.element_Processbutton) delete data.value.element_Processbutton;
    }
    if (['14'].includes(value)) {
      data.value.element_TheField = '';
      delete data.value.element_Thelist;
    } else {
      data.value.element_Thelist = '';
      delete data.value.element_TheField;
    }
    if (data.value.element_control == 'button' && ['0', '1', '14'].includes(value)) {
      data.value.element_sqlFormCode = '';
      data.value.element_sqlListCode = '';
      data.value.element_jsfailCallback = '';
      data.value.element_jserrorCallback = '';
    } else {
      delete data.value.element_sqlFormCode;
      delete data.value.element_sqlListCode;
      delete data.value.element_jsfailCallback;
      delete data.value.element_jserrorCallback;
    }

    if (data.value.element_control == 'button' && ['12'].includes(value)) {
      data.value.element_placement = 'top';
    } else {
      delete data.value.element_placement;
    }

    if (data.value.element_control == 'button' && ['3'].includes(value)) {
      data.value.element_closeCallback = '';
    } else {
      delete data.value.element_closeCallback;
    }

    if (data.value.element_control == 'button' && ['10'].includes(value)) {
      data.value.element_fieldName = '';
      data.value.element_selectField = '';
      data.value.element_exportFileName = '';
      data.value.element_isField = false;
      data.value.element_exportAll = false;
    } else {
      delete data.value.element_fieldName;
      delete data.value.element_selectField;
      delete data.value.element_exportFileName;
      delete data.value.element_isField;
      delete data.value.element_exportAll;
    }
  };
  const handleCheckChangeProPer = (value: boolean) => {
    if (!value) {
      delete data.value.element_Propermissionide;
      delete data.value.element_Processmodifications;
    }
  };
  const handleCheckChangeProButton = (value: boolean) => {
    if (!value) {
      delete data.value.element_Processidentifier;
      delete data.value.element_Processdefault;
      delete data.value.element_Processelement;
      delete data.value.element_initiateProceSelectNode;
    } else {
      data.value.element_Processidentifier = '';
      data.value.element_Processdefault = '';
      data.value.element_Processelement = '';
      data.value.element_initiateProceSelectNode = false;
    }
  };
  const handleChangeLink = (value: string) => {
    if (value === '0') {
      delete data.value.element_child;
      delete data.value.element_ParameterName;
    } else if (value === '1') {
      delete data.value.element_bound;
    } else if (value === '') {
      delete data.value.element_child;
      delete data.value.element_ParameterName;
      delete data.value.element_bound;
    }
  };
  // const handleChangeDirecitons = (value: string) => {
  //   if (value !== 'horizontal') {
  //     data.value.options.element_IconsText = '';
  //   }
  // };
  // const handleSelectModeChange = (val: boolean) => {
  //   if (data.value.type === 'uploadForm') {
  //     return;
  //   }
  //   if (val) {
  //     if (data.value.element_inpt) {
  //       if (!(data.value.element_inpt instanceof Array)) {
  //         data.value.element_inpt = [data.value.element_inpt];
  //       }
  //     } else {
  //       data.value.element_inpt = [];
  //     }
  //   } else {
  //     data.value.element_inpt.length
  //       ? (data.value.element_inpt = data.value.element_inpt[0])
  //       : (data.value.element_inpt = null);
  //   }
  // };
  // const handlePermissionsChange = debounce(async (isCheck: boolean) => {
  //   const dataIds = {
  //     state: isCheck ? 1 : 0,
  //     elementId: data.value.id,
  //     unitId: dataUnit.value.dataId.id,
  //     regionId: dataUnit.value.regionId,
  //     name: data.value.element_name,
  //     code: data.value.element_code,
  //   };
  //   const { code, msg } = await elementPermissions(dataIds);
  //   if (code === 0) {
  //     ElMessage.success(msg);
  //   } else {
  //     ElMessage.error(msg);
  //   }
  // }, 500);
  const handleSqlChange = (value: string) => {
    if (!value) {
      delete data.value.element_action;
      delete data.value.element_sql;
    } else if (value == '0') {
      delete data.value.element_action;
    } else if (value == '1') {
      delete data.value.element_sql;
    }
  };
  const handleDynamicUnitChange = (value: boolean) => {
    if (value) {
      data.value.element_dynamicCode = '';
    } else {
      delete data.value.element_dynamicCode;
    }
  };
  const handleSelectChange = (value: string) => {
    if (value === '1') {
      delete data.value.element_action;
      delete data.value.element_entityAssociation;
      delete data.value.element_list;
      data.value.element_collapseTags = false;
    } else {
      data.value.element_entityAssociation = false;
      delete data.value.element_collapseTags;
    }
    if (value === '2') {
      data.value.element_action = '';
      data.value.element_entityAssociation = true;
      data.value.element_list = [];
      data.value.element_collapseTags = true;
    } else {
      data.value.element_entityAssociation = false;
      delete data.value.element_collapseTags;
    }
  };
  const handleSelectChange1 = (value: string) => {
    if (value === '1') {
      data.value.element_collapseTags = false;
    } else {
      delete data.value.element_collapseTags;
    }
  };
  const handleEntityAssociation = (value: boolean) => {
    if (value) {
      data.value.element_action = '';
      data.value.element_list = [
        {
          parentValue: '',
          entityValue: '',
        },
      ];
    } else {
      delete data.value.element_action;
      delete data.value.element_list;
    }
  };
  const handleFixedColumnLeft = (value: boolean) => {
    if (value) {
      data.value.element_fixedcolumnRight = '';
    }
  };
  const handleFixedColumnRight = (value: boolean) => {
    if (value) {
      data.value.element_fixedcolumn = '';
    }
  };

  const handleAllSummary = (value: boolean) => {
    if (value) {
      data.value.element_precision = '';
    } else {
      delete data.value.element_precision;
    }
  };

  const handleRowFieldsList = () => {
    if (
      data.value.element_control === 'copyRow' ||
      (hasKey('element_copyRowFields') && data.value.element_copyRowFields)
    ) {
      data.value.element_copyRowFields.push({
        fields: '',
      }) as Array<copyRow>;
    }
  };
  const handleRowFieldsRemove = debounce(async (index: number) => {
    if (
      data.value.element_control === 'copyRow' ||
      (hasKey('element_copyRowFields') && data.value.element_copyRowFields)
    ) {
      if (data.value.element_copyRowFields.length === 1) {
        ElMessage.warning('至少保留一个');
        return;
      }
      data.value.element_copyRowFields.splice(index, 1);
    }
  }, 500);
  const handleClose = (value: string) => {
    if (['0', '1', '3', '4'].includes(value)) {
      data.value.element_clearSelectiondata = false;
    } else {
      delete data.value.element_clearSelectiondata;
    }
  };
  const handleSelectPlacementChange = (value: string) => {
    if (value == '1') {
      data.value.element_placement = 'top';
      data.value.element_diaologWidth = '800';
      data.value.element_diaologHeight = '600';
    } else {
      data.value.element_diaologWidth = '';
      data.value.element_diaologHeight = '';
      delete data.value.element_placement;
    }
  };
  // 勾选复制行
  const copyRowChange = (value: any) => {
    if (value) {
      data.value.element_sort = false;
      data.value.element_sortNum = false;
    }
  };
  // 勾选排序
  const sortChange = (value: any) => {
    if (value) {
      data.value.element_copyRow = false;
      data.value.element_sortNum = false;
    }
  };
  // 勾选数字排序
  const sortNumChange = (value: any) => {
    if (value) {
      data.value.element_sort = false;
      data.value.element_copyRow = false;
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
  }
  :deep(.el-switch) {
    margin-right: 10px;
  }
  .widthPerpend {
    width: 56px;
  }
</style>
